<template>
  <div>
    <div  class="singleCom" ref="singleComRef" @click="clickPro(showData.comId)" @mouseenter.native="maxSpecial()" @mouseleave.native="minSpecial()">
      <div class="specialStatus">
        <el-button type="danger" class="statusEle" size="medium" plain disabled>{{showData.serStatus}}</el-button>
      </div>
      <div class="singleComContent">
        <div class="specialDes">
          <span>
            {{showData.comSerName}}+{{showData.colorName}}
          </span><br/>
          <span>
            ￥{{showData.price}}
          </span>
        </div>
        <div class="specialImg">
          <div class="specialImgProDiv">
            <img :src="showData.img" class="specialImgPro"/>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {waxSpecial} from "commonjs/const/waxSpecial";
  import {currency} from "commonjs/const/priceSuffix";

  export default {
    name: "specialTier",
    props: {
      data: {
        type: Object
      }
    },
    data(){
      return {
        showData: this.data,
        preSha: false
      }
    },
    methods: {
      clickPro(comId){//点击商品
        this.$router.push({path: "/detail",query: { comId }})
      },
      maxSpecial(){//光标移入放大
        let element = this.$refs.singleComRef;
        waxSpecial(element,1.1,1,true).then(data => {
          this.preSha = data;
        })
      },
      minSpecial() {//光标移出缩小
        let tempInter = setInterval(() => {
          if (this.preSha) {
            this.preSha = false;
            let element = this.$refs.singleComRef;
            //调用防抖函数
            waxSpecial(element,1,1,true);
            clearInterval(tempInter)
          }
        },1)
      }
    }
  }
</script>

<style scoped>
  .specialImgProDiv{
    width: 200px;
  }
  .singleCom{
    width: 603px;
    height: 400px;
    background-color: white;
    display: flex;
    flex-direction: column;
  }
  .singleCom:hover{
    cursor: pointer;
  }
  .singleComContent{
    /*background-color: red;*/
    height: 80%;
    display: flex;
    justify-content: space-between;
  }

  .specialStatus{
    width: 100%;
    height: 15%;
  }
  .specialImgPro{
    width: 350px;
    height: 100%;
  }
  .statusEle{
    margin-top: 7%;
    margin-left: 7%;
  }
  .specialDes{
    /*background-color: yellow;*/
    position: absolute;
    z-index: 1;
    width: 320px;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .specialDes span{
    font-size: 23px;
  }
  .specialImg{
    /*background-color: cyan;*/
    width: 0%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-left: 470px;
    margin-bottom: 30px;
  }
</style>
